<script lang="ts" setup>
import type { StateType } from './types';

import { computed } from 'vue';
import { useRoute } from 'vue-router';
import { $t } from '@vben/locales';
import { Page } from '@vben/common-ui';
import { useTabs } from '@vben/hooks';

import { useTitle } from '@vueuse/core';
import {
  Card,
  message,
  Select,
  SelectOption,
  TabPane,
  Tabs,
} from 'ant-design-vue';
import dayjs from 'dayjs';
import { storeToRefs } from 'pinia';
import { pinyin } from 'pinyin-pro';

import { useVbenForm } from '#/adapter/form';
import { getPageInfo, postPage, putPage } from '#/api/portal/news';
import { usePreferencesStore } from '#/store';

const route = useRoute();

const { setTabTitle, closeCurrentTab } = useTabs();

const index: any = computed(() => {
  return route.params?.id ?? -1;
});
const router = useRouter();

const routeMeta = router.currentRoute.value.meta;
const routeTitle = routeMeta.title.replace('管理', '');
const preferencesStore = usePreferencesStore();
const { title } = storeToRefs(preferencesStore);
const pageTitle =
  Number.parseInt(index.value, 10) === 0
    ? $t('page.common.Add')+` ${routeTitle}`
    : `No.${index.value} - `+$t('page.common.Edit')+` ${routeTitle}`;
setTabTitle(pageTitle);
useTitle(`${pageTitle} - ${title.value}`);
 
const disabled = ref(true);
const activeKey = ref('1');
const state: StateType = reactive({
  form: {
    post_title: '',
    post_alias: '',
    more: {
      thumbnail: '',
    },
  },
  pageThemeFiles: [],
});

const [BasicForm, BasicFormApi] = useVbenForm({
  handleSubmit: onSubmit,
  resetButtonOptions: {
    show: false,
  },
  schema: [
    {
      component: 'Input',
      dependencies: {
        show: false,
        // 随意一个字段改变时，都会触发
        triggerFields: ['id'],
      },
      fieldName: 'id',
      label: 'ID',
    },
    {
      component: 'Input',
      defaultValue: '',
      dependencies: {
        trigger: (values) => {
          disabled.value = !values.news_title;
          state.form.news_content = values.news_content;
          state.form.news_title = values.news_title;
          state.form.thumbils = values.thumbils;
          state.form.news_des = values.news_des;
          state.form.news_status = values.news_status;
          state.form.places = values.places
          state.form.show_time = values.show_time
        },
        // 随意一个字段改变时，都会触发
        triggerFields: [
          'id',
          'news_title',
          'thumbils',
          'news_des',
          'news_status',
          'places',
          'news_content',
          'show_time'
        ],
      },
      componentProps: {
        placeholder: $t('page.common.Please Enter'),
      },
      fieldName: 'news_title',
      label: `${routeTitle} `+$t('page.common.Title'),
      rules: 'required',
    },
    {
      component: 'RadioGroup',
      componentProps: {
        options: [
          {
            label: 'Publish',
            value: 1,
          },
          {
            label: 'Trash',
            value:  0,
          },
          
        ],
      },
      fieldName: 'news_status',
      rules: 'required', 
      label: $t('page.common.Status'),
    },
    {
        component: 'DatePicker',  // 使用 Ant Design Vue 的日期选择器
        fieldName: 'show_time',
        label: $t('admin.displayTime'),
        defaultValue: null,
        componentProps: {
          placeholder: $t('pade.common.Please Enter'),
          format: 'YYYY-MM-DD', // 时间格式
        },
       
      },
    {
      component: 'Textarea',
      defaultValue: '',
      componentProps: {
        placeholder: $t('page.common.Please Enter'),
      },
      fieldName: 'places',
      label: $t('admin.address'),
    },

    {
      component: 'Textarea',
      defaultValue: '',
      componentProps: {
        placeholder: $t('page.common.Please Enter'),
      },
      fieldName: 'news_des',
      label: $t('page.common.Description'),
    },

    {
      component: 'Upload',
      defaultValue: '',
      componentProps: {
        placeholder: $t('page.common.Please Enter'),
      },
      fieldName: 'thumbils',
      label: $t('page.common.Thumbnail'),
    },
        {
      component: 'Editor',
      defaultValue: '',
      componentProps: {
        placeholder: $t('page.common.Please Enter'),
      },
      fieldName: 'news_content',
      label: $t('page.common.Content'),
    },
  ],
});



async function onSubmit() {
  function showMsg(msg: string) {
    message.success(msg);
    closeCurrentTab();
      router.push({
          name: `PortalNews`,
     });
  }
  const values: any = state.form;

  if (values.id) {
    const { msg } = await putPage(values);
    showMsg(msg);
  } else {
    delete values.id;
    const { msg } = await postPage(values);
    showMsg(msg);
  }
}
async function onGetPage(id: number) {
  const { data } = await getPageInfo({ id });
  data.post = {
    id: data?.id ?? undefined,
    news_title: data?.news_title ?? '',
    news_des: data?.news_des ?? '',
    news_content: data?.news_content ?? '',
    thumbils: data?.thumbils ?? '',
    news_status: data?.news_status ?? '',
    places:data?.places??'',
     show_time: data?.show_time ? dayjs(data.show_time) : null, // 转为 dayjs 对象
  };
  state.form = data.post;
  BasicFormApi.setValues({ ...state.form});
  state.pageThemeFiles = data.pageThemeFiles;
}

onMounted(async () => {
  if(index.value>0){
          await onGetPage(index.value);
  }
  
});
</script>

<template>
  <Page>
    <Card :title="`${routeTitle} `+$t('page.common.Details')">
      <BasicForm />
    </Card>
  </Page>
</template>
